<script setup>
import { ref, computed } from 'vue';
import { getCityStore } from "@/stores/modules/getCity.js";

// 获取城市列表
const jobStatusList = getCityStore().cityList;

// 选中的求职城市
const workCity = ref([]); // 默认值是空数组，以匹配级联选择的格式
let oldWorkCity = [...workCity.value]; // 保存旧的城市选择，用于取消

const filter = (inputValue, path) => {
  return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};

// 是否进入编辑模式
const isCardSelected = ref(false);

// 获取选中的城市名称
const workCityName = ref('未选择城市')
const getWorkCityName = () => {
  if (!workCity.value || workCity.value.length === 0) return "";

  // 第一级匹配
  const province = jobStatusList.find(item => item.code === workCity.value[0]);
  if (!province) return "";

  // 第二级匹配
  if (workCity.value.length > 1) {
    const city = province.pchilds?.find(item => item.code === workCity.value[1]);
    return city ? `${province.name} - ${city.name}` : province.name;
  }

  return province.name;
};

// 取消编辑
const cancel = () => {
  workCity.value = [...oldWorkCity];
  isCardSelected.value = false;
};

// 确认提交
const submit = () => {

  oldWorkCity = [...workCity.value];
  workCityName.value = getWorkCityName()
  isCardSelected.value = false;
};

// 进入编辑模式
const selectCard = () => {
  isCardSelected.value = true;
};

// 样式
const selectStyle = {
  width: "100%",
  height: "45px"
};
</script>

<template>
  <!-- 编辑模式 -->
  <div class="edit-container" v-if="isCardSelected">
    <h4 style="height: 40px; margin-top: 0;">选择求职城市</h4>
    <a-form class="form">
      <a-row :gutter="80">
        <a-col :span="12">
          <a-form-item>
            <!-- 级联选择组件 -->
            <a-cascader
                v-model:value="workCity"
                :field-names="{ label: 'name', value: 'code', children: 'pchilds' }"
                :show-search="{ filter }"
                :options="jobStatusList"
                placeholder="请选择工作城市"
                size="large"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <div class="button-item">
              <a-button type="default" size="large" @click="cancel">取消</a-button>
              <a-button type="primary" size="large" @click="submit">确认</a-button>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- 默认模式 -->
  <div class="default-container" @click="selectCard" v-else>
    <div style="display: flex; align-items: center">
      <div class="title"></div>
      <h2>工作城市</h2>
    </div>
    <div class="user-info">
      <h4>
        {{workCityName}}
      </h4>
    </div>
  </div>
</template>

<style scoped>
.edit-container {
  width: 100%;
  height: 100%;
  background-color: #f5f6fa;
  padding: 20px;
  border-radius: 10px;
}

.default-container {
  width: 100%;
  padding: 20px;
}

.form h4 {
  color: #454647;
}

.user-info {
  margin-left: 3px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
}
.user-info > span {
  display: flex;
  font-size: 14px;
  align-items: center;
}

.title {
  width: 4px;
  height: 25px;
  background: #00bebd;
  border-radius: 3px;
  margin-top: -8px;
  margin-right: 10px;
}

.button-item {
  display: flex;
  margin-top: 60px;
  margin-left: 100px;
  justify-content: space-around;
}

a-button {
  margin-top: 8px;
  border: none;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

a-button:hover {
  background-color: #66bb69;
}
</style>
